import "./index.scss"
import { useRef, useState, useEffect, useCallback } from "react"
import { Button, Modal } from "antd"
function Cropper({ isModalOpen, handleOk, handleCancel, previewFile }) {
  const canvasRef = useRef(null)
  const [canvasTimes, setCanvasTimes] = useState(1)
  // 记录鼠标的位置
  const [mousePosition, setMousePosition] = useState({
    startX: 0,
    startY: 0,
    lastX: 0,
    lastY: 0
  })
  const [startDragging, setStartDragging] = useState(false)
  const drawImage = (left = mousePosition.lastX, top = mousePosition.lastY) => {
    if (!previewFile.type.startsWith("image/")) return
    let canvas = canvasRef.current
    let ctx = canvas.getContext("2d")
    // 画之前先清除
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    let img = new Image()
    img.src = previewFile.url
    img.onload = () => {
      let imageWidth = img.width
      let imageHeight = img.height
      if (imageWidth > imageHeight) {
        let scale = canvas.width / imageWidth
        imageWidth = canvas.width * canvasTimes
        imageHeight = imageHeight * scale * canvasTimes
      } else {
        let scale = canvas.height / imageHeight
        imageHeight = canvas.height * canvasTimes
        imageWidth = imageWidth * scale * canvasTimes
      }
      ctx.drawImage(
        img,
        (canvas.width - imageWidth) / 2 + left,
        (canvas.height - imageHeight) / 2 + top,
        imageWidth,
        imageHeight
      )
    }
  }
  const handleWheel = useCallback(e => {
    e.preventDefault() // 阻止默认滚动行为
    if (e.deltaY < 0) {
      setCanvasTimes(prev => Math.min(prev + 0.1, 5))
    } else {
      setCanvasTimes(prev => Math.max(prev - 0.1, 0.8))
    }
  }, [])
  const handleMouseDown = event => {
    setMousePosition(prev => ({
      ...prev,
      startX: event.clientX,
      startY: event.clientY
    }))
    setStartDragging(true)
  }
  const handleMouseMove = event => {
    if (startDragging) {
      drawImage(
        event.clientX - mousePosition.startX + mousePosition.lastX,
        event.clientY - mousePosition.startY + mousePosition.lastY
      )
    }
  }
  const handleMouseUp = event => {
    setStartDragging(false)
    setMousePosition(prev => ({
      ...prev,
      lastX: event.clientX - prev.startX + prev.lastX,
      lastY: event.clientY - prev.startY + prev.lastY
    }))
  }
  useEffect(() => {
    const canvas = canvasRef.current
    if (canvas) {
      canvas.addEventListener("wheel", handleWheel)
    }
    return () => {
      if (canvas) {
        canvas.removeEventListener("wheel", handleWheel)
      }
    }
  }, [handleWheel])

  useEffect(() => {
    if (canvasRef.current) {
      drawImage() // 每次 canvasTimes 更新后重新绘制图像
    }
  }, [previewFile, canvasTimes, canvasRef.current]) // 添加 canvasTimes 作为依赖项
  const myHandleOk = () => {
    let canvas = canvasRef.current
    let ctx = canvas.getContext("2d")
    let imageData = ctx.getImageData(100, 100, 100, 100)
    let myCanvas = document.createElement('canvas')
    myCanvas.width = 100
    myCanvas.height = 100
    let myCtx = myCanvas.getContext("2d")
    myCtx.putImageData(imageData, 0, 0)
    let dataUrl = myCanvas.toDataURL()
    handleOk(dataUrl)
  }
  return (
    <div className="cropper-container">
      <Modal
        title="图像裁剪"
        open={isModalOpen}
        onOk={myHandleOk}
        onCancel={handleCancel}
        okText="裁剪"
        cancelText="取消"
      >
        <div
          className="canvas-container"
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
        >
          <canvas
            ref={canvasRef}
            width="300px"
            height="300px"
            style={{ border: "2px dashed blue" }}
          ></canvas>
          <div className="cropper-area"></div>
        </div>
      </Modal>
    </div>
  )
}
export default Cropper
